<template>
  <div class="history">
    <el-card>
      <div slot="header">
        <h2>历史记录</h2>
        <p>您的试衣历史将显示在这里</p>
      </div>
      
      <el-table
        v-loading="loading"
        :data="historyList"
        style="width: 100%">
        <el-table-column
          label="日期"
          prop="date"
          width="180">
        </el-table-column>
        <el-table-column
          label="原始图片"
          width="180">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.originalImage"
              :preview-src-list="[scope.row.originalImage]"
              fit="cover"
              @error="handleImageError('原始图片', scope.row.originalImage)">
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="结果图片">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.resultImage"
              :preview-src-list="[scope.row.resultImage]"
              fit="cover"
              @error="handleImageError('结果图片', scope.row.resultImage)">
              <div slot="error" class="image-error">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="参数信息"
          prop="params">
        </el-table-column>
        <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="viewDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 暂无数据显示 -->
      <el-empty v-if="historyList.length === 0" description="暂无历史记录"></el-empty>
      
      <!-- 详情对话框 -->
      <el-dialog title="详细信息" :visible.sync="dialogVisible" width="80%">
        <div class="detail-container" v-if="currentDetail">
          <div class="image-comparison">
            <div class="original-image">
              <h3>原始照片</h3>
              <img :src="currentDetail.originalImage" alt="原始照片">
            </div>
            <div class="result-image">
              <h3>穿搭效果</h3>
              <img :src="currentDetail.resultImage" alt="穿搭效果">
            </div>
          </div>
          
          <div class="params-container">
            <h3>参数信息</h3>
            
            <el-tabs type="border-card">
              <el-tab-pane label="基本信息">
                <el-descriptions border>
                  <el-descriptions-item label="性别">{{ currentDetail.paramsObj.gender }}</el-descriptions-item>
                  <el-descriptions-item label="年龄段">{{ getAgeGroupLabel(currentDetail.paramsObj.ageGroup) }}</el-descriptions-item>
                  <el-descriptions-item label="身高">{{ currentDetail.paramsObj.height }} cm</el-descriptions-item>
                  <el-descriptions-item label="体型">{{ getBodyTypeLabel(currentDetail.paramsObj.bodyType) }}</el-descriptions-item>
                  <el-descriptions-item label="肤色">{{ getSkinToneLabel(currentDetail.paramsObj.skinTone) }}</el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              
              <el-tab-pane label="穿搭信息">
                <el-descriptions border>
                  <el-descriptions-item label="场合">{{ getOccasionLabel(currentDetail.paramsObj.occasion) }}</el-descriptions-item>
                  <el-descriptions-item label="季节">{{ getSeasonLabel(currentDetail.paramsObj.season) }}</el-descriptions-item>
                  <el-descriptions-item label="服装类型">{{ getClothingTypeLabel(currentDetail.paramsObj.clothingType) }}</el-descriptions-item>
                  <el-descriptions-item label="具体款式">{{ getClothingSubTypeLabel(currentDetail.paramsObj.clothingType, currentDetail.paramsObj.clothingSubType) }}</el-descriptions-item>
                  <el-descriptions-item label="风格">{{ getStyleLabel(currentDetail.paramsObj.style) }}</el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              
              <el-tab-pane label="颜色信息">
                <el-descriptions border>
                  <el-descriptions-item label="主色调">
                    <div class="color-box" :style="{ backgroundColor: getColorHex(currentDetail.paramsObj.mainColor) }"></div>
                    {{ getColorLabel(currentDetail.paramsObj.mainColor) }}
                  </el-descriptions-item>
                  <el-descriptions-item label="辅助色">
                    <div class="color-box" :style="{ backgroundColor: getColorHex(currentDetail.paramsObj.accentColor) }"></div>
                    {{ getColorLabel(currentDetail.paramsObj.accentColor) }}
                  </el-descriptions-item>
                  <el-descriptions-item label="颜色偏好">
                    {{ getColorPreferences(currentDetail.paramsObj.colorPreference) }}
                  </el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
              
              <el-tab-pane label="特殊要求">
                <el-descriptions border>
                  <el-descriptions-item label="面料偏好">{{ getFabricPreferences(currentDetail.paramsObj.fabricPreference) }}</el-descriptions-item>
                  <el-descriptions-item label="图案/印花">{{ getPatterns(currentDetail.paramsObj.pattern) }}</el-descriptions-item>
                  <el-descriptions-item label="个性需求">{{ currentDetail.paramsObj.specialRequirements || '无' }}</el-descriptions-item>
                </el-descriptions>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'History',
  data() {
    return {
      loading: false,
      dialogVisible: false,
      currentDetail: null,
      historyList: [],
      // 颜色映射
      colorMap: {
        black: { hex: '#000000', label: '黑色' },
        white: { hex: '#FFFFFF', label: '白色' },
        gray: { hex: '#808080', label: '灰色' },
        red: { hex: '#FF0000', label: '红色' },
        blue: { hex: '#0000FF', label: '蓝色' },
        green: { hex: '#008000', label: '绿色' },
        yellow: { hex: '#FFFF00', label: '黄色' },
        purple: { hex: '#800080', label: '紫色' },
        pink: { hex: '#FFC0CB', label: '粉色' },
        brown: { hex: '#A52A2A', label: '棕色' },
        navy: { hex: '#000080', label: '藏青色' },
        beige: { hex: '#F5F5DC', label: '米色' }
      },
      // 其他选项的映射
      mappings: {
        ageGroup: {
          'under18': '18岁以下',
          '18-25': '18-25岁',
          '26-35': '26-35岁',
          '36-45': '36-45岁',
          'above46': '46岁以上'
        },
        bodyType: {
          'slim': '偏瘦',
          'standard': '标准',
          'slightlyOverweight': '微胖',
          'plump': '偏胖',
          'muscular': '健壮'
        },
        skinTone: {
          'fair': '白皙',
          'natural': '自然色',
          'tan': '小麦色',
          'dark': '深色'
        },
        occasion: {
          'casual': '日常休闲',
          'work': '职场工作',
          'formal': '正式场合',
          'date': '约会',
          'party': '派对聚会',
          'outdoor': '户外活动',
          'sport': '运动健身'
        },
        season: {
          'spring': '春季',
          'summer': '夏季',
          'autumn': '秋季',
          'winter': '冬季'
        },
        clothingType: {
          'top': '上衣',
          'outerwear': '外套',
          'pants': '裤装',
          'skirt': '裙装',
          'dress': '连衣裙',
          'suit': '套装'
        },
        style: {
          'casual': '休闲',
          'business': '商务',
          'streetwear': '街头',
          'vintage': '复古',
          'elegant': '优雅',
          'sport': '运动',
          'ethnic': '民族',
          'formal': '正式',
          'minimalist': '简约'
        },
        colorPreference: {
          'bright': '明亮色调',
          'soft': '柔和色调',
          'dark': '暗色调',
          'contrast': '对比强烈',
          'monochrome': '单色系',
          'colorful': '多彩色系'
        },
        fabric: {
          'cotton': '棉质',
          'silk': '丝质',
          'wool': '毛呢',
          'linen': '麻质',
          'leather': '皮质',
          'denim': '牛仔',
          'cashmere': '羊绒'
        },
        pattern: {
          'solid': '纯色',
          'stripes': '条纹',
          'plaid': '格子',
          'floral': '印花',
          'polkadot': '波点',
          'animal': '动物纹',
          'geometric': '几何图形'
        },
        // 衣服子类型映射
        clothingSubType: {
          top: {
            'tshirt': 'T恤',
            'shirt': '衬衫',
            'blouse': '女式衬衫',
            'polo': 'Polo衫',
            'sweater': '毛衣',
            'hoodie': '连帽衫',
            'tank': '背心'
          },
          outerwear: {
            'jacket': '夹克',
            'coat': '大衣',
            'blazer': '西装外套',
            'cardigan': '开衫',
            'windbreaker': '风衣',
            'down': '羽绒服',
            'leather': '皮衣'
          },
          pants: {
            'jeans': '牛仔裤',
            'chinos': '休闲裤',
            'trousers': '西裤',
            'sweatpants': '运动裤',
            'shorts': '短裤',
            'leggings': '紧身裤'
          },
          skirt: {
            'mini': '迷你裙',
            'midi': '中长裙',
            'maxi': '长裙',
            'pleated': '百褶裙',
            'pencil': '铅笔裙',
            'aline': 'A字裙'
          },
          dress: {
            'casual': '休闲连衣裙',
            'formal': '正式连衣裙',
            'evening': '晚礼服',
            'summer': '夏季连衣裙',
            'shirt_dress': '衬衫裙',
            'bodycon': '紧身连衣裙'
          },
          suit: {
            'business': '商务套装',
            'casual': '休闲套装',
            'formal': '正装',
            'sport': '运动套装'
          }
        }
      }
    }
  },
  methods: {
    viewDetail(row) {
      this.currentDetail = row
      this.dialogVisible = true
    },
    // 从后端API获取历史记录
    fetchHistory() {
      this.loading = true
      console.log('开始获取历史记录...')
      // 确保使用正确的baseURL
      const baseURL = 'http://localhost:5000'
      
      // 直接使用完整的URL
      this.$http.get(`${baseURL}/api/params/list`)
        .then(response => {
          console.log('API响应:', response)
          if (response.data.success) {
            console.log('获取到的原始数据:', response.data.data)
            this.historyList = response.data.data.map(item => {
              const processedItem = {
                ...item,
                originalImage: item.originalImage.startsWith('http') ? item.originalImage : `${baseURL}${item.originalImage}`,
                resultImage: item.resultImage.startsWith('http') ? item.resultImage : `${baseURL}${item.resultImage}`
              }
              console.log('处理后的图片URL:', {
                id: item.id,
                original: processedItem.originalImage,
                result: processedItem.resultImage
              })
              return processedItem
            })
            console.log('最终处理后的数据:', this.historyList)
          } else {
            console.error('获取历史记录失败:', response.data)
            this.$message.error('获取历史记录失败')
          }
        })
        .catch(error => {
          console.error('获取历史记录错误:', error)
          this.$message.error('获取历史记录失败: ' + (error.response?.data?.message || error.message))
        })
        .finally(() => {
          this.loading = false
          console.log('历史记录加载完成')
        })
    },
    // 获取年龄段标签
    getAgeGroupLabel(value) {
      return this.mappings.ageGroup[value] || value || '未知'
    },
    // 获取体型标签
    getBodyTypeLabel(value) {
      return this.mappings.bodyType[value] || value || '未知'
    },
    // 获取肤色标签
    getSkinToneLabel(value) {
      return this.mappings.skinTone[value] || value || '未知'
    },
    // 获取场合标签
    getOccasionLabel(value) {
      return this.mappings.occasion[value] || value || '未知'
    },
    // 获取季节标签
    getSeasonLabel(value) {
      return this.mappings.season[value] || value || '未知'
    },
    // 获取服装类型标签
    getClothingTypeLabel(value) {
      return this.mappings.clothingType[value] || value || '未知'
    },
    // 获取服装子类型标签
    getClothingSubTypeLabel(type, value) {
      if (type && value && this.mappings.clothingSubType[type]) {
        return this.mappings.clothingSubType[type][value] || value || '未知'
      }
      return value || '未知'
    },
    // 获取风格标签
    getStyleLabel(value) {
      return this.mappings.style[value] || value || '未知'
    },
    // 获取颜色十六进制值
    getColorHex(value) {
      return this.colorMap[value]?.hex || '#CCCCCC'
    },
    // 获取颜色标签
    getColorLabel(value) {
      return this.colorMap[value]?.label || value || '未知'
    },
    // 获取颜色偏好标签
    getColorPreferences(values) {
      if (!values || !values.length) return '无'
      if (typeof values === 'string') {
        values = values.split(',')
      }
      return values.map(v => this.mappings.colorPreference[v] || v).join(', ')
    },
    // 获取面料偏好标签
    getFabricPreferences(values) {
      if (!values || !values.length) return '无'
      if (typeof values === 'string') {
        values = values.split(',')
      }
      return values.map(v => this.mappings.fabric[v] || v).join(', ')
    },
    // 获取图案/印花标签
    getPatterns(values) {
      if (!values || !values.length) return '无'
      if (typeof values === 'string') {
        values = values.split(',')
      }
      return values.map(v => this.mappings.pattern[v] || v).join(', ')
    },
    // 添加图片加载错误处理
    handleImageError(type, url) {
      console.error(`图片加载失败 - ${type}:`, url)
    }
  },
  created() {
    this.fetchHistory()
  }
}
</script>

<style scoped>
.history {
  max-width: 1200px;
  margin: 0 auto;
}

.detail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-comparison {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 20px;
}

.original-image,
.result-image {
  text-align: center;
}

.original-image img,
.result-image img {
  width: 300px;
  height: 400px;
  object-fit: cover;
  border-radius: 6px;
}

.params-container {
  width: 100%;
  max-width: 800px;
}

.color-box {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-right: 10px;
  vertical-align: middle;
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 30px;
}
</style> 